<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue的一些演示</title>
  </head>
  <body>
    <div id="app">
      使用 ES 模块构建版本
      person：{{person}}
    </div>

    <script type="module">
      // 使用 import 的方式引入 vue
      import { createApp, reactive } from 'https://unpkg.com/vue@3.2.47/dist/vue.esm-browser.js'
      
      // 定义一个对象，要有 setup、props等属性
      const app = {
        setup(props) {
          const person = reactive({
            name: 'composition API演示'
          })

          return {
            person
          }
        }
      }

      // 创建 Vue 的一个应用
      createApp(app)
        .mount('#app') // 指定渲染的位置
    </script>
  </body>
</html>